<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>home</title>
    <link rel="stylesheet" th:href="@{/static/lib/layui-v2.5.4/css/layui.css}" media="all">
    <script>
        const PATH = "[[${#httpServletRequest.getContextPath()}]]";
    </script>

    <!-- 避免Thymeleaf异常 -->
    <script type="text/javascript" th:inline="javascript"></script>
    <style>
        .layui-bg-black {
            background: #D3DAE6 !important;
        }

        table {
            width: 100%;
            word-break: break-all;
        }

        table tr td:first-child {
            padding-left: 30px;
            font-weight: bold;
        }

        td {
            width: 50%;
            line-height: 2;
            vertical-align: middle;
            border-top: 1px solid #D3DAE6;
            border-bottom: 1px solid #D3DAE6;
            font-weight: inherit;
            text-align: inherit;
            color: #343741;
            font-size: 12px;
        }
    </style>
</head>
<body id="iosiframe">

<div id='head_div'>
    <div class="layui-form layui-form-pane" action="" onsubmit="return false">

        <hr class="layui-bg-black">
        <p style="line-height:26px;">
            <span class='layui-badge layui-bg-cyan' id="service_name"></span>&nbsp;&nbsp;&nbsp;&nbsp;
            <span class='layui-badge layui-bg-cyan' id="transaction_name"></span><br>
            <span class='layui-badge layui-bg-cyan' id="time"></span>
            <span class='layui-badge layui-bg-cyan' id="duration"></span>
            <span class='layui-badge layui-bg-cyan' id="addr"></span>
            <span class='layui-badge layui-bg-cyan' id="status"></span>
            <span class='layui-badge layui-bg-cyan' id="userAgent"></span>
        </p>
        <hr class="layui-bg-black">

        <div class="layui-tab layui-tab-brief" lay-filter="demo">
            <ul class="layui-tab-title">
                <li class="layui-this" style="font-weight: bold">Metadata</li>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-tab-item layui-show" id="metadata">
                    <div class="layui-form-item">

                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>Labels</legend>
                        </fieldset>
                        <p style="margin-left: 30px;">No data available</p>
                        <br>

                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>Trace</legend>
                        </fieldset>

                        <table>
                            <tr>
                                <td>trace.id</td>
                                <td id="traceId"></td>
                            </tr>
                        </table>

                        <br>
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>Transaction</legend>
                        </fieldset>

                        <table>
                            <tr>
                                <td>transaction.id</td>
                                <td id="transactionId"></td>
                            </tr>
                        </table>

                        <br>
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>HTTP</legend>
                        </fieldset>

                        <table>
                            <tr>
                                <td> http.request.headers.Accept</td>
                                <td id="hrha"></td>
                            </tr>
                            <tr>
                                <td> http.request.headers.Accept-Encoding</td>
                                <td id="hrhae"></td>
                            </tr>
                            <tr>
                                <td> http.request.headers.Accept-Language</td>
                                <td id="hrhal"></td>
                            </tr>
                            <tr>
                                <td> http.request.headers.Cache-Control</td>
                                <td id="hrhcc"></td>
                            </tr>
                            <tr>
                                <td>http.request.headers.Connection</td>
                                <td id="hrhc"></td>
                            </tr>
                            <tr>
                                <td>http.request.headers.Host</td>
                                <td id="hrhh"></td>
                            </tr>
                            <tr>
                                <td>http.request.headers.Sec-Fetch-Dest</td>
                                <td id="hrhsfd"></td>
                            </tr>
                            <tr>
                                <td>http.request.headers.Sec-Fetch-Mode</td>
                                <td id="hrhsfm"></td>
                            </tr>
                            <tr>
                                <td>http.request.headers.Sec-Fetch-Site</td>
                                <td id="hrhsfs"></td>
                            </tr>
                            <tr>
                                <td>http.request.headers.Sec-Fetch-User</td>
                                <td id="hrhsfu"></td>
                            </tr>
                            <tr>
                                <td>http.request.headers.Upgrade-Insecure-Requests</td>
                                <td id="hrhuir"></td>
                            </tr>
                            <tr>
                                <td>http.request.headers.User-Agent</td>
                                <td id="hrhua"></td>
                            </tr>
                            <tr>
                                <td>http.request.method</td>
                                <td id="hrm"></td>
                            </tr>
                            <tr>
                                <td>http.request.socket.encrypted</td>
                                <td id="hrse"></td>
                            </tr>
                            <tr>
                                <td>http.request.socket.remote_address</td>
                                <td id="hrsra"></td>
                            </tr>
                            <tr>
                                <td>http.response.finished</td>
                                <td id="hrf"></td>
                            </tr>
                            <tr>
                                <td>http.response.headers.Content-Type</td>
                                <td id="hrhct"></td>
                            </tr>
                            <tr>
                                <td>http.response.headers.Date</td>
                                <td id="hrhd"></td>
                            </tr>
                            <tr>
                                <td>http.response.headers.Transfer-Encoding</td>
                                <td id="hrhte"></td>
                            </tr>
                            <tr>
                                <td>http.response.headers_sent</td>
                                <td id="hrhs"></td>
                            </tr>
                            <tr>
                                <td>http.response.status_code</td>
                                <td id="hrsc"></td>
                            </tr>
                            <tr>
                                <td>http.version</td>
                                <td id="hv"></td>
                            </tr>
                        </table>

                        <br>
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>Host</legend>
                        </fieldset>

                        <table>
                            <tr>
                                <td>host.architecture</td>
                                <td id="ha"></td>
                            </tr>
                            <tr>
                                <td>host.hostname</td>
                                <td id="hh"></td>
                            </tr>
                            <tr>
                                <td>host.ip</td>
                                <td id="hi"></td>
                            </tr>
                            <tr>
                                <td>host.name</td>
                                <td id="hn"></td>
                            </tr>
                            <tr>
                                <td>host.os.platform</td>
                                <td id="hop"></td>
                            </tr>
                        </table>

                        <br>
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>Client</legend>
                        </fieldset>

                        <table>
                            <tr>
                                <td>client.ip</td>
                                <td id="ci"></td>
                            </tr>
                        </table>

                        <br>
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>Service</legend>
                        </fieldset>

                        <table>
                            <tr>
                                <td>service.framework.name</td>
                                <td id="sfn"></td>
                            </tr>
                            <tr>
                                <td>service.framework.version</td>
                                <td id="sfv"></td>
                            </tr>
                            <tr>
                                <td>service.language.name</td>
                                <td id="sln"></td>
                            </tr>
                            <tr>
                                <td>service.language.version</td>
                                <td id="slv"></td>
                            </tr>
                            <tr>
                                <td>service.name</td>
                                <td id="sn"></td>
                            </tr>
                            <tr>
                                <td>service.node.name</td>
                                <td id="snn"></td>
                            </tr>
                            <tr>
                                <td>service.runtime.name</td>
                                <td id="srn"></td>
                            </tr>
                            <tr>
                                <td>service.runtime.version</td>
                                <td id="srv"></td>
                            </tr>
                        </table>

                        <br>
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>Process</legend>
                        </fieldset>

                        <table>
                            <tr>
                                <td>process.pid</td>
                                <td id="pp"></td>
                            </tr>
                            <tr>
                                <td>process.title</td>
                                <td id="pt"></td>
                            </tr>
                        </table>

                        <br>
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>Agent</legend>
                        </fieldset>

                        <table>
                            <tr>
                                <td>agent.ephemeral_id</td>
                                <td id="ae"></td>
                            </tr>
                            <tr>
                                <td>agent.name</td>
                                <td id="an"></td>
                            </tr>
                            <tr>
                                <td>agent.version</td>
                                <td id="av"></td>
                            </tr>
                        </table>

                        <br>
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>URL</legend>
                        </fieldset>

                        <table>
                            <tr>
                                <td>url.domain</td>
                                <td id="ud"></td>
                            </tr>
                            <tr>
                                <td>url.full</td>
                                <td id="uf"></td>
                            </tr>
                            <tr>
                                <td>url.path</td>
                                <td id="up"></td>
                            </tr>
                            <tr>
                                <td>url.port</td>
                                <td id="u_p"></td>
                            </tr>
                            <tr>
                                <td>url.scheme</td>
                                <td id="us"></td>
                            </tr>
                        </table>

                        <br>
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>User</legend>
                        </fieldset>
                        <p style="margin-left: 30px;">No data available</p>

                        <br>
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>User agent</legend>
                        </fieldset>
                        <table>
                            <tr>
                                <td>user_agent.device.name</td>
                                <td id="uadn"></td>
                            </tr>
                            <tr>
                                <td>user_agent.name</td>
                                <td id="uan"></td>
                            </tr>
                            <tr>
                                <td>user_agent.original</td>
                                <td id="uao"></td>
                            </tr>
                            <tr>
                                <td>user_agent.version</td>
                                <td id="uav"></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script src="/static/layui/layui.all.js" th:src="@{/static/lib/layui-v2.5.4/layui.all.js}"></script>
<script th:src="@{/static/lib/jquery-3.4.1/jquery-3.4.1.min.js}"></script>
<script>
    let form, layer, element;
    layui.use(['layer', 'form', 'element'], function () {
        form = layui.form, layer = layui.layer, element = layui.element;
    });

    $(function () {
        let data = sessionStorage.getItem("param");
        sessionStorage.removeItem("param");
        data = JSON.parse(data);

        let data2 = data.data;
        $("#service_name").html(data2.service.name);
        if (data.transactionName === undefined || data.transactionName === '') {
            $("#transaction_name").hide();
        } else {
            $("#transaction_name").html(data.transactionName);
        }
        $("#time").html(data.time);
        $("#duration").html(data.duration);

        if (data2.http === undefined || data2.url === undefined) {
            $("#addr").hide();
        } else {
            $("#addr").html(data2.http.request.method + ' ' + data2.url.full);
        }

        if (data2.http === undefined || data2.http.response === undefined) {
            $("#status").hide();
        } else {
            $("#status").html(data2.http.response.status_code);
        }

        if (data2.user_agent === undefined || data2.user_agent.name === undefined) {
            $("#userAgent").hide();
        } else {
            $("#userAgent").html(data2.user_agent.name + "（" + data2.user_agent.version + "）");
        }

        $("#traceId").html(data2.trace.id);
        $("#transactionId").html(data2.transaction.id);

        //HTTP
        if (data.http !== undefined && data2.http.request !== undefined) {
            $("#hrha").html(data2.http.request.headers.Accept.toString().replaceAll('\"', ''));
            $("#hrhae").html(data2.http.request.headers['Accept-Encoding'] === undefined ? '' : data2.http.request.headers['Accept-Encoding'].toString().replaceAll('\"', ''));
            $("#hrhal").html(data2.http.request.headers['Accept-Language'] === undefined ? '' : data2.http.request.headers['Accept-Language'].toString().replaceAll('\"', ''));
            $("#hrhcc").html(data2.http.request.headers['Cache-Control'] === undefined ? '' : data2.http.request.headers['Cache-Control'].toString().replaceAll('\"', ''));
            $("#hrhc").html(data2.http.request.headers['Connection'] === undefined ? '' : data2.http.request.headers['Connection'].toString().replaceAll('\"', ''));
            $("#hrhh").html(data2.http.request.headers['Host'] === undefined ? '' : data2.http.request.headers['Host'].toString().replaceAll('\"', ''));
            $("#hrhsfd").html(data2.http.request.headers['Sec-Fetch-Dest'] === undefined ? '' : data2.http.request.headers['Sec-Fetch-Dest'].toString().replaceAll('\"', ''));
            $("#hrhsfm").html(data2.http.request.headers['Sec-Fetch-Mode'] === undefined ? '' : data2.http.request.headers['Sec-Fetch-Mode'].toString().replaceAll('\"', ''));
            $("#hrhsfs").html(data2.http.request.headers['Sec-Fetch-Site'] === undefined ? '' : data2.http.request.headers['Sec-Fetch-Site'].toString().replaceAll('\"', ''));
            $("#hrhsfu").html(data2.http.request.headers['Sec-Fetch-User'] === undefined ? '' : data2.http.request.headers['Sec-Fetch-User'].toString().replaceAll('\"', ''));
            $("#hrhuir").html(data2.http.request.headers['Upgrade-Insecure-Requests'] === undefined ? '' : data2.http.request.headers['Upgrade-Insecure-Requests'].toString().replaceAll('\"', ''));
            $("#hrhua").html(data2.http.request.headers['User-Agent'] === undefined ? '' : data2.http.request.headers['User-Agent'].toString().replaceAll('\"', ''));
            $("#hrm").html(data2.http.request['method'] === undefined ? '' : data2.http.request['method'].toString().replaceAll('\"', ''));
            $("#hrse").html(data2.http.request.socket.encrypted === undefined ? '' : data2.http.request.socket.encrypted.toString().replaceAll('\"', ''));
            $("#hrsra").html(data2.http.request.socket.remote_address);
            $("#hrf").html(data2.http.response.finished);
            $("#hrhct").html(data2.http.response.headers['Content-Type'].toString().replaceAll('\"', ''));
            $("#hrhd").html(data2.http.response.headers.Date.toString().replaceAll('\"', ''));
            $("#hrhte").html(data2.http.response.headers['Transfer-Encoding'].toString().replaceAll('\"', ''));
            $("#hrhs").html(data2.http.response.headers_sent);
            $("#hrsc").html(data2.http.response.status_code);
            $("#hv").html(data2.http.version);
        }

        //Host
        $("#ha").html(data2.host.architecture);
        $("#hh").html(data2.host.hostname);
        $("#hi").html(data2.host.ip);
        $("#hn").html(data2.host.name);
        $("#hop").html(data2.host.os.platform);

        //Client
        $("#ci").html(data2.client.ip);

        //Service
        $("#sfn").html(data2.service.framework.name);
        $("#sfv").html(data2.service.framework.version);
        $("#sln").html(data2.service.language.name);
        $("#slv").html(data2.service.language.version);
        $("#sn").html(data2.service.name);
        $("#snn").html(data2.service.node.name);
        $("#srn").html(data2.service.runtime.name);
        $("#srv").html(data2.service.runtime.version);

        //Process
        $("#pp").html(data2.process.pid);
        $("#pt").html(data2.process.title);

        //Agent
        $("#ae").html(data2.agent.ephemeral_id);
        $("#an").html(data2.agent.name);
        $("#av").html(data2.agent.version);

        //URL
        $("#ud").html(data2.url.domain);
        $("#uf").html(data2.url.full);
        $("#up").html(data2.url.path);
        $("#u_p").html(data2.url.port);
        $("#us").html(data2.url['scheme']);

        //User

        //User agent
        $("#uadn").html(data2.user_agent.device.name);
        $("#uan").html(data2.user_agent.name);
        $("#uao").html(data2.user_agent.original);
        $("#uav").html(data2.user_agent.version);

        $("#serviceName").html(data2.service.name);
        $("#agentEphemeralId").html(data2.agent.ephemeral_id);
        $("#agentName").html(data2.agent.name);
        $("#agentVersion").html(data2.agent.version);


    })
</script>
<script type="text/javascript" th:inline="none">
    function init() {
        let ua = navigator.userAgent.toLowerCase();
        let screenWidth = window.screen.width;
        if (!/iphone|ipad|ipod/.test(ua)) {
            $("#iosiframe").attr("scrolling", "auto");
        } else {
            $('#iosiframe').width(screenWidth + 'px');
        }

        $("body").css({
            "height": $(window).height() - 15
        });
        $("#body_div").css({
            "height": $("body").height() - $("#head_div").height() - 10
        });
        tableHeight = $("#body_div").height() - 15;
    }

    $(window).resize(function () {
        init();
    });
</script>
</body>
</html>
